<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/head.jsp"%>

<!DOCTYPE html>
<html>
<head>
	<title>${article.title} - ${category.name}</title>
	<%-- <meta name="decorator" content="cms_default_${site.theme}"/> --%>
	<meta name="description" content="${article.description} ${category.description}" />
	<meta name="keywords" content="${article.keywords} ${category.keywords}" />
	<meta name="viewport" content="width=device-width, initial-scale=1" /> 
	<script type="text/javascript">
		$(document).ready(function() {
			if ("${category.allowComment}"=="1" && "${article.articleData.allowComment}"=="1"){
				$("#comment").show();
				page(1);
			}
			
			/* //标题
			var titleSize = 60;
			var titlecoffset = 5;
			jQuery('#titleId').find('h3').css("line-height",titleSize+titlecoffset+'px');
			jQuery('#titleId').find('h3').css("font-size",titleSize+'px');
			
			
			//摘要
			var descSize = 60;
			var descoffset = 5;
			
			jQuery('#descriptionId').css("line-height",descSize+descoffset+'px');
			jQuery('#descriptionId').css("font-size",descSize+'px');
			
			//內容
			var contentsize = 60;
			var contentoffset = 10;
			jQuery('#artibodyTitle').css("line-height",contentsize+contentoffset+'px');
			jQuery('#artibodyTitle').css("height",contentsize+contentoffset+100+'px');
			jQuery('#artibodyTitle').css("font-size",contentsize+'px');
			
			jQuery('#contentInfoId').find('p').css("line-height",contentsize+contentoffset+'px');
			jQuery('#contentInfoId').find('p').css("font-size",contentsize+'px'); */
			
		});
		function page(n,s){
			$.get("${ctx}/comment",{theme: '${site.theme}', 'category.id': '${category.id}',
				contentId: '${article.id}', title: '${article.title}', pageNo: n, pageSize: s, date: new Date().getTime()
			},function(data){
				$("#comment").html(data);
			});
		}
		
	</script>
</head>
<body>
	   
	     
 <div id="dialog" title="" class="white_content" style="">
   		<p id="showimg0">
   			
   		</p>
   </div>
<div class="">
   <div class="articleArea" id="articleAreaId">
   		<!-- 标题 -->
   		<div id="titleId">
			<h3 style="color:#555555;font-size:20px;text-align:center;border-bottom:1px solid #ddd;padding-bottom:15px;margin:25px 0;">
				${article.title}
			</h3>
		</div>
		
		<!-- 摘要 -->
		<c:if test="${not empty article.description}">
			<div id="descriptionId">
				摘要：${article.description}
			</div>
		</c:if>
		
		<!-- 内容 -->
		<div id="contentInfoId" style="">
			${article.articleData.content}
		</div>
		
		<!-- 底部 -->
		<div style="border-top:1px solid #ddd;padding:10px;margin:25px 0;">
			发布者：${article.user.name} &nbsp; 点击数：${article.hits} &nbsp; 发布时间：
			<fmt:formatDate value="${article.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/> 
			&nbsp; 更新时间：
			<fmt:formatDate value="${article.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
		</div>
   </div>
   <!-- <div id="showImageId" class="showImageTop" style="display: none;">
   	<iframe id="iframeId" width="90%" height="97%" src=""></iframe>
   </div> -->
</div>
<style type="text/css">
		.showImageTop{width: 100%;height: 100%;position: absolute;z-index: 1000px;
		border: 1px solid #BBBBBB;background-color: #BBBBBB;padding-top:10px;
		text-align: center;padding-top: 50px;
		 }
		.articleArea{}
		body { font: normal 100% Helvetica, Arial, sans-serif; } 
		p{ font-size: 0.875em; }  
	</style>	     
<script type="text/javascript">
var showImgUrl = '${ctxStatic}/jquery-mobile/page/slider.jsp';
var imginfos = null;

$(document).ready(function() {
	var contentInfo = jQuery('#contentInfoId');
	jQuery('img',contentInfo).click(function(){
		var index = getCurrentIndex(this,contentInfo);
		var info = "点击的是第"+(index+1)+"张图片"+","+jQuery(this).attr("alt");
		jQuery('#showimg0').html(info);

		var url = 'http://192.168.31.121:8080/soccercms/img/'+index;
		var userUrl = '/user/123';
		var imginfo = getImgInfo(contentInfo);
		var params = JsonToString(imginfo);
		//window.location.href = showImgUrl+'?imginfo='+params;
		
		imginfos = imginfo;
		jQuery('#articleAreaId').css('display','none');
		jQuery('#showImageId').css('display','');
		jQuery('#iframeId').attr('src',showImgUrl+'?imginfo='+params)
	});
	
	jQuery('#showImageId').click(function(){
		jQuery('#articleAreaId').css('display','');
		jQuery('#showImageId').css('display','none');
		jQuery('#iframeId').attr('src','')
	});
	 
});

function getCurrentIndex(obj,contentInfo){
	var index = 0;
	jQuery('img',contentInfo).each(function(i,v){
		if(this == obj){
			index = i;
		}
	});
	return index;
}

//获取图片信息
function getImgInfo(contentInfo){
	var datas = [];
	jQuery('img',contentInfo).each(function(i,v){
		var data = {'height' : '100%','width' : '100%'};
		var content = '<div style="vertical-align: middle;">'
		//+'<a href="#">'
		+'<img style="width:100%;height:100%;position:absolute" alt="" '
		+'src="'+jQuery(this).attr("src")+'">'
		//+'</a>'
		+'</div>';
		//content = jQuery(this).attr("src");
		data.content = content;
		datas.push(data);
	});
	return datas;
}

</script>	     
</body>
</html>